<template>
    <div style="width: 100%;height: 100%;">
        <h1 style="margin-top: 0px; margin-bottom: 0px; font-size: 18px;color: white; text-align: center;">车辆辆次趋势</h1>
        <div ref="chartContainer" style="width: 1268.5px;height: 344.317px;"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: 'VehicleEmissionChart',
    data() {
        return {
            chartInstance: null,
            // 统一管理所有类别名称（消除硬编码）
            categories: ['车辆辆次', '告警辆次']
        };
    },
    props: {
        data: {
            type: Object,
            default: () => {},
        }
    },
    watch: {
        data: {
            /*immediate:true,*/
            deep: true,
            handler(newValue, oldValue) {
                setTimeout(() => {

                    this.initChart(newValue);
                    window.addEventListener('resize', this.resizeChart);
                }, 100);

            },
        },
    },
    mounted() {
       
    },
    beforeDestroy() {
        if (this.chartInstance) {
            window.removeEventListener('resize', this.handleResize);
            this.chartInstance.dispose();
            this.chartInstance = null;
        }
    },
    methods: {
        generateDateData() {
            const dates = [];
            const endDate = new Date();
            for (let i = 29; i >= 0; i--) {
                const date = new Date();
                date.setDate(endDate.getDate() - i);
                dates.push(date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' }));
            }
            return dates;
        },

        generateRandomData(min, max) {
            return Array.from({ length: 30 }, () => Math.floor(Math.random() * (max - min + 1)) + min);
        },

        initChart(newValue) {
            this.chartInstance = echarts.init(this.$refs.chartContainer);
            // const dateData = this.generateDateData();

            let carNum = newValue.carNum;
            let alarmNum = newValue.alarmNum;

            const dateData = carNum.map(e=>{

                return e.day
            })

            
            const data1 = carNum.map(e=>{

                return e.value
            })

            const data2 = alarmNum.map(e=>{

                return e.value
            })
            let that = this
            
            const data = [data1,data2]
            const option = {
                color: ['#36CBCB', '#36CB8D', '#8A8CFF', '#FFC154'],
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(255, 255, 255, 0.9)',
                    formatter: (params) => params.map(param =>
                        `<div class="flex items-center">
                            <span class="inline-block w-3 h-3 rounded-full mr-2" style="background-color: ${param.color}"></span>
                            <span>${param.seriesName}：${param.value} 辆</span>
                        </div>`
                    ).join('')
                },
                legend: {
                    data: this.categories, // 使用动态类别数组
                    textStyle: { color: '#ffffff' },
                    top: '5%',
                    right: '5%'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '15%', // 增加底部间距
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: dateData,
                    axisLabel: {
                        interval: 0,
                        rotate: 60, // 增大旋转角度
                        margin: 15,
                        textStyle: { color: '#ffffff', fontSize: 12 }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '车辆数量 (辆)',
                    nameTextStyle: { color: '#ffffff' },
                    axisLabel: { color: '#ffffff' }
                },
                series: data.map((e,index) => ({ // 动态生成系列
                    name: that.categories[index],
                    type: 'line',
                    data: e,
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 6,
                    lineStyle: { width: 2 }
                }))
            };

            this.chartInstance.setOption(option);
            window.addEventListener('resize', this.handleResize);
        },

        handleResize() {
            this.chartInstance && this.chartInstance.resize();
        }
    }
};
</script>

<style scoped>
/* 可添加自定义样式 */
</style>